hexo 블로그 시작하기

작성일 | Edited on | In | Views:

Hexo 시작하기

준비물

  • github 계정
  • git
  • nodeJS & npm

설치하기

  1. nvm 이용, node & npm 설치 이 사이트 참조

  2. github에 “<github계정명>.github.io“ repo 생성

  3. 아래 명령어 실행
1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

hexo 서버가 실행된다. http://127.0.0.1:4000 으로 접속하면 생성된 hexo 사이트를 확인 가능하다.

  1. blog 폴더 아래에 _config.yml 파일을 수정한다. url 항목과 deploy 항목을 수정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# 아래 url항목을 github페이지 주소로 변경 예) url: http://andrewpqc.github.io
url: http://yoursite.com  
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

#위쪽에 deploy 항목을 아래와 같은 형식으로 변경한다. 앞에 주석은 제거
#deploy: 
#  type: git
#  repo: https://github.com/Andrewpqc/Andrewpqc.github.io.git
#  branch: master
  1. hexo deployer 다운 및 설치
1
$ npm insatll hexo-deployer-git --save
  1. hexo 페이지 generate 및 deploy
1
$ hexo d -g

https://<본인github 계정>.github.io 로 접속하면 deploy된 hexo 사이트가 확인 가능하다.

참조사이트

NEXT 테마 설치

  1. hexo블로그가 설치된 경로로 이동한다. 예 ) /home/user/blog/
1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
  1. 블로그 경로 아래 themes/next가 설치된 것을 확인 할 수 있다. 블로그 경로 아래 _config.yml 파일에서 theme 설정을 next로 수정한다.
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
  1. hexo 서버를 재시작한다.
1
2
$ hexo clean
$ hexo s
  • 테마 관련 설정은 theme/next/_config.yml 에서 수정가능하다.

NEXT 테마 관련 각종 세팅 참조 사이트

0%